<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useStore} from "vuex";

const store = useStore();

const showPicker = ref(store.state.langState)

const columns = ref([
  {text: '中文', value: 'zh'},
  {text: 'English', value: 'en'},
]);

const onConfirm = ({selectedOptions}: any) => {
  localStorage.setItem('language', selectedOptions[0].value);
  location.reload();
};

const onCancel = () => {
  store.state.langState = false;
}

onMounted(() => {
  watch(() => store.state.langState, (newLangState: boolean) => {
    console.log(333)
    showPicker.value = newLangState;
  });
});
</script>

<template>
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom" :close-on-click-overlay="false">
    <van-picker
        :title="$t('lang.changeLang')"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
        :confirm-button-text="$t('lang.confirm')"
        :cancel-button-text="$t('lang.cancel')"
    />
  </van-popup>
</template>
